<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 * 清除浮动
			 * 	让浮动的子元素撑开父级的高度
			 * 
			 * 	1.给父级加高度
			 * 		扩展性不好
			 * 	2.通过开启BFC
			 * 		overflow:hidden;
			 * 		定位
			 * 		浮动
			 * 	3.br标签 <br clear="all"/>
			 * 		ie6 7底下不支持
			 * 		违反了结构 行为 样式相分离
			 * 	4.空标签清浮动  <div style="clear :both;"></div>
			 * 		违反了结构 行为 样式相分离
			 * 		ie 6下元素的最小高度为19px
			 * 		可以尝试给元素的font-size设为0 -->2px
			 * 	5.伪元素清浮动 clearfix:after{}
			 * 		ie6下不支持伪元素
			 * 		所以要额外的去开启haslayout
			 */
			
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				border: 1px solid #000;
			}
			#inner{
				float: left;
				width: 200px;
				height: 200px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner">
			</div>
			<br clear="all"/>
		</div>
	</body>
</html>
